<template>
  <div class="container">
    <div class="tip">
      <p class="one">被比较的代码</p>
      <p class="two">需要比较的代码</p>
    </div>
    <div class="top">
      <Blocklayout>
        <template #left>
          <MonacoDditor v-model="VueDiffAttrs.prev" height="38vh" :language="VueDiffAttrs.language" />
        </template>

        <template #menu>
          <CommonMenu :menuConfig="menuConfig" v-model="VueDiffAttrs" />
        </template>

        <template #right>
          <MonacoDditor v-model="VueDiffAttrs.current" height="38vh" :language="VueDiffAttrs.language" />
        </template>
      </Blocklayout>
    </div>

    <div class="diff">
      <VueDiff v-bind="VueDiffAttrs" />
    </div>
  </div>
</template>

<script lang="ts" setup>
// https://github.com/hoiheart/vue-diff

import { ref, reactive } from "vue";
import menuConfig from "./menuConfig";

const VueDiffAttrs = reactive<Record<string, any>>({
  mode: "split", // split, unified
  theme: "dark", // dark, light, custom${string}
  language: "typescript",
  prev: `alert("hello prev");`,
  current: `alert("hello current");`,
  folding: true,
  "input-delay": 10
  // "virtual-scroll": { // 虚拟滚动
  // 	height: 500,
  // 	lineMinHeight: 24,
  // 	delay: 100
  // }
});
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.vue-diff-theme-github {
  @import "highlight.js/scss/github.scss";
  background-color: #ccc;
}

.container {
  .tip {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    padding: 0 10px;
    font-size: 14px;
    margin-bottom: 10px;
    color: rgb(87, 86, 86);
    .one {
      color: $danger;
    }
    .two {
      color: $success;
    }
  }
  .top {
    margin-bottom: 10px;
    .btns {
      margin-top: 10px;
      text-align: center;
    }

    .menu {
      .menu-item {
        margin: 4px;
        .title {
          flex: 1;
          font-size: 12px;
        }
        .config {
          flex: 1;
          text-align: center;
        }
      }
    }
    :deep(.left),
    :deep(.right) {
      overflow-x: hidden;
    }
  }
  .diff {
    max-height: 42vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
